<template>
  <view class="container">
    <view class="car-info-content">
      <view>{{ record.licenseNo || '-' }}</view>
      <view>{{ record.carModelName }}</view>
    </view>
    <ve-card type="none" fold>
      <ve-cell label="车辆当前归属门店">{{ record.carSiteName || '-' }}</ve-cell>
      <ve-cell label="归属车场">{{ record.libraryName || '-' }}</ve-cell>
      <ve-cell label="车架号">{{ record.vin || '-' }}</ve-cell>
      <ve-cell label="违章单号">{{ record.violantionCode || '-' }}</ve-cell>
      <ve-cell label="违章状态">{{ record.eventStatusStr || '-' }}</ve-cell>
    </ve-card>

    <ve-card title="违章信息" type="none" fold>
      <ve-cell label="违章单关联门店">{{ record.siteName || '-' }}</ve-cell>
      <ve-cell label="违章时间">{{ record.eventTime || '-' }}</ve-cell>
      <ve-cell label="违章发生方">{{ record.violationPartyName || '-' }}</ve-cell>
      <ve-cell label="关联订单号">
        <view>
          {{ record.orderCode || '-' }}
          <view class="line-ellipsis" v-if="record.giveStaffName" style="width: 400rpx">交车人：{{ record.giveStaffName }}</view>
          <view>违章押金收取方式：{{ record.violationChargeTypeName || '-' }}</view>
        </view>
      </ve-cell>
      <ve-cell label="承租人信息" v-if="record.orderCode">
        <div>
          <template v-if="record.memberName && record.memberPhone"> {{ record.memberName }} | {{ record.memberPhone }} </template>
          <template v-else>-</template>
        </div>
      </ve-cell>
      <ve-cell label="违章城市">{{ record.eventCityName || '-' }}</ve-cell>
      <ve-cell label="违章地点">{{ record.eventAddress || '-' }}</ve-cell>
      <ve-cell label="违章行为">{{ record.eventContent || '-' }}</ve-cell>
      <ve-cell-val label="罚分" :value="record.eventScore" unit="分" />
      <ve-cell-price label="罚款" :value="record.eventAmount" />
      <ve-cell label="处理方">{{ record.handleTypeName || '-' }}</ve-cell>
      <ve-cell label="负责人">{{ record.staffName || '-' }}</ve-cell>
      <ve-cell label="具体代办方式" v-if="record.handleType == 1">{{ record.specificHandleWayName || '-' }}</ve-cell>
      <ve-cell-price label="违章代办收入" v-if="record.handleType == 1" :value="record.incomeAmount" />
      <ve-cell-price label="代办服务费" v-if="record.handleType == 1" :value="record.handleAmount" />
      <ve-cell-price label="代办真实成本" v-if="record.handleType == 1" :value="record.handleRealCost" />
      <ve-cell label="违章押金收取方式">{{ record.violationChargeTypeName }}</ve-cell>
      <ve-cell label="备注">{{ record.remark || '-' }}</ve-cell>
      <ve-cell label="上传附件" layout="vertical">
        <ve-upload v-model="record.fileIdList" disabled></ve-upload>
      </ve-cell>
    </ve-card>

    <ve-card title="行驶证记录" type="none" v-if="record.handleType !== 1">
      <template v-for="list of record.driveLicenseRecordList" :key="list.id">
        <ve-cell :label="`${list.label}时间`">
          {{ list.driveLicenseUseTime || '-' }}
        </ve-cell>
        <ve-cell :label="list.name">
          {{ list.depositStateName || '-' }}
        </ve-cell>
        <ve-cell label="押金金额">
          {{ unitVal(list.depositAmount) }}
        </ve-cell>
        <ve-cell label="上传凭证" layout="vertical">
          <ve-upload disabled :modelValue="list.fileIdList" />
        </ve-cell>
      </template>
    </ve-card>

    <view class="call-record">
      <view class="record-title">
        <view class="record-title-main">催缴记录</view>
        <view class="empty-call" v-if="!descList.length">暂无催缴记录</view>
        <view class="record-title-sub" @click="viewCallRecord" v-else>
          查看详情 <ve-icon name="arrow_right_0" size="32" style="margin-left: 4rpx" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getViolationDetail, checkCallRecord } from '@/api/asset/car-violation'
  import { ref } from 'vue'
  import { unitVal } from '@/utils'

  const record = ref({})
  const descList = ref([])
  onLoad((id) => {
    if (id) {
      getDetail(id)
      getCallRecord(id)
    }
  })

  const getDetail = async (id) => {
    const res = await getViolationDetail({ id: id.id })
    if (res.code === 200) {
      const data = res.result
      data.driveLicenseRecordList.forEach((item) => {
        if (item.driveLicenseUseState == 1) {
          item.label = '行驶证借出'
          item.name = '是否收取押金'
        } else if (item.driveLicenseUseState == 2) {
          item.label = '行驶证归还'
          item.name = '是否归还押金'
        }
      })
      console.log('data', data)
      record.value = data
    }
  }

  const getCallRecord = async (id) => {
    const res = await checkCallRecord({ id: id.id })
    if (res.code === 200) {
      const data = res.result
      descList.value = data.urgeList || []
    }
  }

  const viewCallRecord = () => {
    uni.navigateTo({
      url: `/pages/asset/car-violation/detail/callRecord?id=${record.value.id}`,
    })
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: auto;
    min-height: 100%;
    background: #f7f8fa;
    padding: 24rpx;
  }
  .car-info-content {
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    height: 168rpx;
    background-image: url('../../../../static/images/carinfo-bc.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: center;
    padding-left: 32rpx;
    color: #ffffff;
    font-family: PingFang SC-Regular, PingFang SC;
    margin-bottom: 24rpx;
    view:nth-of-type(1) {
      font-size: 40rpx;
      font-weight: 600;
      margin-bottom: 4rpx;
    }
    view:nth-of-type(2) {
      margin-top: 4rpx;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
  .call-record {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    padding: 32rpx 24rpx;
    height: 108rpx;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    .record-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .record-title-main {
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(25, 28, 39, 1);
    }
    .empty-call {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #cdced0;
    }
    .record-title-sub {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #9ea5bb;
      display: flex;
      align-items: center;
    }
  }
  :deep(.ve-cell-title) {
    width: 240rpx;
    max-width: 240rpx;
  }
</style>
